site_8g/src/app/[locale]/login/component/GoogleCom/style.scss

.GoogleCom {
  background-color: #1f1f1f;
  padding: .72rem .18rem 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  .title {
    font-size: .16rem;

    h2 {
      color: #ff6a01;
      text-align: center;
      font-weight: bold;
    }
  }

  .otherAccount {
    margin: .2rem 0 .1rem;
    
    .ggAfb {
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;

      span {
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 67%;
        border-radius: .04rem;
        height: .42rem;
        color: #fff;
        font-size: .1rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &.gg {
          background-color: #06b594;
        }
        i {
          width: .26rem;
          height: .26rem;
          margin-right: .13rem;
          background-image: url('/svg/gg.svg');
          background-size: 100% 100%;
        }
      }
    }

    .or {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      margin-top: .16rem;

      span {
        display: block;
        margin: 0 .03rem;
        font-size: .12rem;
        color: #ddd;
      }

      &:after,&:before {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        border-top: .01rem solid #666;
      }
    }
  }
}